<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<title>ByteCollege云课</title>
	<link rel="stylesheet" th:href="@{font/css/font-awesome.min.css}">
	<link rel="stylesheet" th:href="@{css/bootstrap.css}">
	<link rel="stylesheet" th:href="@{css/wangEditor.css}"/>
	<script th:src="@{js/jquery-3.3.1.min.js}"></script>
	<script th:src="@{js/bootstrap.js}"></script>
	<script th:src="@{js/wangEditor.js}"></script>
	<script th:src="@{js/jquery.validate.js}"></script>
	<style>
		body {
			background: #f9f9f9;
			font-size: 12px;
		}
		.position-relative {
			position: relative;
		}
		.banner-container form .tip {
			padding-top: 5px;
			color: hsla(0,0%,100%,.6);
		}
		.header{
			background-color: #191e29;
			border-width: 0;
		}
		.header .navbar-brand {
			padding: 0;
		}
		.header .navbar-brand img {
			height: 50px;
		}
		.header .navbar-nav>li>a {
			font-size: 16px;
		}
		.header .navbar-nav .dropdown .dropdown-menu {
			min-width: 130px;
			border-width: 0;
			text-align: center;
		}
		.header .navbar-nav .dropdown .dropdown-menu {
			background-color: #191e29;
		}
		.layout-body, .layout-side {
			padding: 0 5px;
		}
		.layout {
			min-height: 80%;
			margin-top: 70px;
			margin-bottom: 20px;
		}
		.content {
			margin-bottom: 10px;
			padding: 30px;
			background: #fff;
			border: 1px solid #eee;
		}
		.question-item>.col-md-10 {
			padding: 0;
		}
		.user-avatar {
			position: relative;
			display: inline-block;
		}
		.user-avatar img {
			width: 50px;
			height: 50px;
			border-radius: 50%;
		}
		.user-username {
			display: inline-block;
		}
		.layout-body, .layout-side {
			padding: 0 5px;
		}
		.course-infobox-follow {
			font-size: 15px;
			color: #999
		}
		.breadcrumb li a {
			color: #666;
		}
		.question-detail {
			background: #fff;
			padding: 30px;
			margin-bottom: 15px;
			box-shadow: 0 1px 1px #ccc;
		}
		.question-headline .question-title {
			font-size: 20px;
			font-weight: 800;
			word-break: break-all;
			width: 650px;
			color: #484e54;
		}
		.question-headline .question-figure {
			float: right;
			margin-right: 20px;
			padding-top: 5px;
			color: #666;
			font-size: 14px;
		}
		.question-headline .question-figure {
			float: right;
			margin-right: 20px;
			padding-top: 5px;
			color: #666;
			font-size: 14px;
		}
		.question-author {
			margin-top: 16px;
			font-size: 13px;
		}
		.user-avatar {
			position: relative;
			display: inline-block;
		}
		.user-username {
			display: inline-block;
		}
		.question-author span {
			margin-right: 30px;
		}
		.btn {
			border-radius: 0;
		}
		.question-content {
			margin-top: 20px;
			margin-bottom: 40px;
		}
		.question-answers {
			padding-top: 50px;
		}
		.ptilte {
			font-size: 18px;
			color: #666;
			padding-bottom: 6px;
		}
		.answer-item {
			margin-top: 30px;
		}
		.answer-head {
			float: left;
			width: 25px;
			margin-right: 10px;
		}
		.user-avatar {
			position: relative;
			display: inline-block;
		}
		.user-avatar .member-icon {
			position: absolute;
			bottom: 1%;
			right: 3%;
			width: 32%;
		}
		.answer-detail {
			position: relative;
			margin-left: 55px;
			padding-bottom: 5px;
		}
		.answer-content {
			margin: 5px 0 10px;
			font-size: 15px;
			color: #484e54;
			word-wrap: break-word;
		}
		.answer-content {
			margin: 5px 0 10px;
			font-size: 15px;
			color: #484e54;
			word-wrap: break-word;
		}
		.markdown-body {
			-ms-text-size-adjust: 100%;
			-webkit-text-size-adjust: 100%;
			color: #333;
			font-size: 16px;
			line-height: 1.6;
			word-wrap: break-word;
		}
		.footer-col .col-title {
			font-size: 14px;
			margin-bottom: 10px;
			color: hsla(0,0%,100%,.5);
		}
		.footer-col a {
			display: inline-block;
			margin-bottom: 3px;
			color: hsla(0,0%,100%,.5);
		}
	</style>
</head>
<body>
<div th:include="index::head-nav"></div>
<!--文章模块开始-->
<div class="container layout layout-margin-top">
    <div class="row">
        <div class="col-md-12 layout-body">
			<div class="content question-detail">
				<div class="question-headline">
					<span class="question-title">[[${article.articleTitle}]]</span>
				</div>
				<div class="question-author">
					<div class="user-avatar">
						<img class="avatar" th:src="@{article.userHeadphoto}">
					</div>
					<div class="user-username ">
						<span class="username" href="/user/347060" target="_blank">[[${article.userNickname}]]</span>
					</div>
					<span th:text="${#dates.format(article.articleTime,'yyyy-MM-dd HH:mm')}"></span>
					<div class="pull-right course-infobox-follow" data-follow-url="/courses/1/follow"
						 data-unfollow-url="/courses/1/unfollow">
						<form th:action="@{/article/addCollect}" th:if="${collectStatus == 1}">
							<input type="hidden" name="articleId" th:value="${article.articleId}">
							<span class="course-infobox-followers">查看·[[${article.articleClicks}]]</span>
							<span class="course-infobox-followers">收藏·[[${collectNum}]]</span>
							<input class="submit-question btn btn-primary" type="submit" value="收藏">
						</form>
						<div th:if="${collectStatus == 0}">
							<span class="course-infobox-followers">查看·[[${article.articleClicks}]]</span>
							<span class="course-infobox-followers">收藏·[[${collectNum}]]</span>
							<span class="submit-question btn btn-primary">已收藏</span>
						</div>
					</div>
				</div>
				<div class="question-content markdown-body">
					<p><span th:utext="${article.articleContent}"></span></p>
				</div>
				<div class="your-answer words-ctrl">
					<div th:if="${session.data == null}" class="navbar-right btns">
						<p style="text-align: center;font-weight: 300; font-size: 18px;">
							<span>请<a th:href="@{/user/tologin}" style="color: #57c3c2;">登录</a>后再发表评论！</span>
						</p>
					</div>
					<div th:unless="${session.data == null}">
						<form method="post" th:action="@{addAremark}">
							<input type="hidden" name="articleId" th:value="${article.articleId}"/>
							<div id="editor"></div>
							<textarea id="container" name="aremarkContent" style="display:none;height: 100%;width: 100%"></textarea>
							<input type="submit" class="submit-question btn btn-primary" style="margin-top: 10px" Text="发表评论" />
						</form>
					</div>
				</div>
				<div class="question-answers">
					<div th:switch="${message}">
						<div th:case="'Success'" class="alert alert-success">
							<strong>回复成功!</strong>
						</div>
						<div th:case="'Failed'" class="alert alert-danger">
							<strong>回复失败!</strong> 请稍后再试
						</div>
						<div th:case="'IsNull'" class="alert alert-danger">
							<strong>回复失败!</strong> 请填写回复内容
						</div>
					</div>
					<p class="ptilte">共有<span style="color:#0c9">[[${article.aremarkAmount}]]</span>条回复</p>
					<hr/>
					<div class="answer-item" th:each="aremark:${aremarkList}">
						<div class="answer-head">
							<div class="user-avatar ">
								<img class="avatar" th:src="@{aremark.userHeadphoto}">
							</div>
						</div>
						<div class="answer-detail">
							<div class="user-username">
								<span class="username" href="/user/212008" target="_blank">[[${aremark.userNickname}]]</span>
								<span class="create-time" th:text="${#dates.format(aremark.aremarkTime,'yyyy-MM-dd HH:mm')}"></span>
							</div>
							<div class="answer-content markdown-body">
								<span class="comment-reply" th:utext="${aremark.aremarkContent}"></span>
							</div>
							<hr/>
						</div>
					</div>
				</div>
				<nav class="pagination-container">
					<ul class="pagination">
						<!--点击首页会跳转到第一页，并且首页禁用-->
						<th:block th:if="${page.current==1}">
							<li id="first" class="active,disabled">
								<a>首页</a>
							</li>
						</th:block>

						<th:block th:if="${page.current>1}">
							<li><a th:href="'?articleId='+${article.getArticleId()}+'&pageIndex='+${1}">首页</a></li>
						</th:block>

						<li  th:if="${page.hasPrevious()}">
							<a  th:href="'?articleId='+${article.getArticleId()}+'&pageIndex='+(${page.current}-1)">
								<span aria-hidden="true">上一页</span>
							</a>
						</li>
						<li class="disabled">
							<a>第[[${page.current}]]页/共[[${page.pages}]]页</a>
						</li>
						<!--下一页-->
						<li  th:if="${page.hasNext()}">
							<a  th:href="'?articleId='+${article.getArticleId()}+'&pageIndex='+(${page.current}+1)">
								<span aria-hidden="true">下一页</span>
							</a>
						</li>


						<!--点击末页会跳转到最后一页，并且最后一页禁用-->
						<th:block th:if="${page.current<page.pages}">
							<li > <a th:href="'?articleId='+${article.getArticleId()}+'&pageIndex='+${page.pages}">末页</a></li>
						</th:block>
						<th:block th:if="${page.current==page.pages}">
							<li class="active,disabled" id="last"> <a>末页</a></li>
						</th:block>
					</ul>
				</nav>
			</div>
		</div>
	</div>
</div>
</body>
</html>
<script type="text/javascript">
	$(function () {
		// 分页
		const pageNum = [[${page.getCurrent()}]];
		const pages = [[${page.getPages()}]];
		const hasNextPage = [[${page.hasNext()}]];
		const hasPreviousPage = [[${page.hasPrevious()}]];
		
		$("#first").click(function () {
			if(!$("#first").hasClass("disabled")) {
				$("#pageNum").val(1);
				$("#qf").submit();
			}
		});

		// 判断按钮状态
		// 没有上一页
		if(!hasPreviousPage) {
			$("#prev").addClass("disabled");
			$("#first").addClass("disabled");
		}
		// 没有下一页
		if(!hasNextPage) {
			$("#next").addClass("disabled");
			$("#last").addClass("disabled");
		}

		// 添加事件
		// 点击首页
		$("#first").click(function () {
			if(!$("#first").hasClass("disabled")) {
				$("#pageNum").val(1);
				$("#qf").submit();
			}
		});
		// 点击上一页
		$("#prev").click(function () {
			if(!$("#prev").hasClass("disabled")) {
				$("#pageNum").val(pageNum - 1);
				$("#qf").submit();
			}
		});
		// 下一页
		$("#next").click(function () {
			if(!$("#next").hasClass("disabled")) {
				$("#pageNum").val(pageNum + 1);
				$("#qf").submit();
			}
		});
		// 最后一页
		$("#last").click(function () {
			if(!$("#last").hasClass("disabled")) {
				$("#pageNum").val(pages);
				$("#qf").submit();
			}
		});
	});
</script>
<script type="text/javascript">
	$(function () {
		// 分页
		const pageNum = [[${page.getCurrent()}]];
		const pages = [[${page.getPages()}]];
		const hasNextPage = [[${page.hasNext()}]];
		const hasPreviousPage = [[${page.hasPrevious()}]];

		$("#first").click(function () {
			if(!$("#first").hasClass("disabled")) {
				$("#pageNum").val(1);
				$("#qf").submit();
			}
		});

		// 判断按钮状态
		// 没有上一页
		if(!hasPreviousPage) {
			$("#prev").addClass("disabled");
			$("#first").addClass("disabled");
		}
		// 没有下一页
		if(!hasNextPage) {
			$("#next").addClass("disabled");
			$("#last").addClass("disabled");
		}

		// 添加事件
		// 点击首页
		$("#first").click(function () {
			if(!$("#first").hasClass("disabled")) {
				$("#pageNum").val(1);
				$("#qf").submit();
			}
		});
		// 点击上一页
		$("#prev").click(function () {
			if(!$("#prev").hasClass("disabled")) {
				$("#pageNum").val(pageNum - 1);
				$("#qf").submit();
			}
		});
		// 下一页
		$("#next").click(function () {
			if(!$("#next").hasClass("disabled")) {
				$("#pageNum").val(pageNum + 1);
				$("#qf").submit();
			}
		});
		// 最后一页
		$("#last").click(function () {
			if(!$("#last").hasClass("disabled")) {
				$("#pageNum").val(pages);
				$("#qf").submit();
			}
		});
	});
</script>
<script type="text/javascript">
	const E = window.wangEditor;
	const editor = new E('#editor');
	const $text = $('#container');
    editor.config.menus = [
        'bold', // 粗体
        'italic', // 斜体
        'link', // 插入链接
        'emoticon', // 表情
    ];
	editor.config.height = 300;
    editor.config.onchange = function (html) {
        // 第二步，监控变化，同步更新到 textarea
        $text.val(html)
    }
    editor.create()
    // 第一步，初始化 textarea 的值
    $text.val(editor.txt.html())
</script>